<template>
	<view class="history_wrap">
		<view class="tn-flex tn-flex-row-between tn-flex-col-center">
			<view class="history_title">历史搜索</view>
			<text class="tn-icon-delete-fill" style="font-size: 40rpx;"></text>
		</view>
		<view class="history_list">
			<tn-tag v-for="item in history_list" :key="item" size="lg" backgroundColor="#01BEFF" fontColor="#ffffff"
				:width="handle_width(item)" padding="0 60rpx" margin="15rpx 20rpx" class="tag">{{item}}</tn-tag>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_value: "",
				history_list: ["土豆土豆土豆土豆土豆", "粉丝", "黄瓜", "白菜", "西红柿", "莲花白", "苦瓜", "莴笋"],
			}
		},
		methods: {
			handle_width(str) {
				return `${str.length * 30}rpx`
				console.log('str', str.length);
			}
		}
	}
</script>

<style scoped>
	.tag {
		border-radius: 10rpx;
	}

	.history_list {
		margin-top: 30rpx;
	}

	/deep/ .tn-input {
		margin: 10rpx 10rpx 10rpx 20rpx;
		width: 50vw;
		background-color: #eee;
		border-radius: 20px;
	}

	.search_title {
		margin: 0 40rpx;
		font-size: 34rpx;
	}

	.history_wrap {
		padding: 20rpx;

		.history_title {
			font-size: 34rpx;
		}
	}
</style>